import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Form, Input, DatePicker, Select, Button, Card, InputNumber, Radio, Icon, Tooltip, Modal } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './style.less';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const CreateForm = Form.create()(props => {
  const { modalVisible, form, handleUpdate, handleModalVisible } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleUpdate(fieldsValue);
    });
  };
  return (
    <Modal
      destroyOnClose
      width={1500}
      visible={modalVisible}
      onOk={okHandle}
      onCancel={handleModalVisible.bind(null)}
      footer={null}
      bodyStyle={{padding: 0}}
    >
      123
    </Modal>
  );
});

@connect(({ loading }) => ({
  submitting: loading.effects['form/submitRegularForm'],
}))
@Form.create()
class BasicForms extends PureComponent {

  state = {
    modalVisible: false
  }

  handleSubmit = e => {
    const { dispatch, form } = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        dispatch({
          type: 'form/submitRegularForm',
          payload: values,
        });
      }
    });
  };

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag
    });
  };

  handleUpdate = ({ remark }) => {
    console.log('handleUpdate')
  };

  render() {

    const { modalVisible } = this.state;

    const { submitting } = this.props;
    const {
      form: { getFieldDecorator, getFieldValue },
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    const parentMethods = {
      modalVisible: this.modalVisible,
      handleUpdate: this.handleUpdate,
      handleModalVisible: this.handleModalVisible,
    };

    return (
      <Fragment>
        <Card title="首页配置" bordered={false}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label="赞助商名称">
              {getFieldDecorator('sponsor', {
                rules: [
                  {
                    required: true,
                    message: "请输入赞助商名称",
                  },
                ],
              })(<Input placeholder="请输入赞助商名称" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="关联小程序 ID">
              {getFieldDecorator('sponsorId', {
                rules: [
                  {
                    required: true,
                    message: "请输入关联小程序 ID",
                  },
                ],
              })(<Input placeholder="请输入关联小程序 ID" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="备注">
              {getFieldDecorator('remark', {
                rules: [
                  {
                    required: true,
                    message: "请输入备注",
                  },
                ],
              })(
                <TextArea
                  style={{ minHeight: 32 }}
                  placeholder="请输入备注"
                  rows={4}
                />
              )}
            </FormItem>
            {/*<FormItem
              {...formItemLayout}
              label="权重"
            >
              {getFieldDecorator('weight')(
                <InputNumber
                  placeholder={formatMessage({ id: 'form.weight.placeholder' })}
                  min={0}
                  max={100}
                />
              )}
            </FormItem> */}
            <FormItem {...formItemLayout} label="关联广告">
              <Button icon="link" type="primary" ghost onClick={this.handleModalVisible}>关联广告</Button>
            </FormItem>
            
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting} size="large">
                确认配置
              </Button>
            </FormItem>
          </Form>
        </Card>
        <CreateForm {...parentMethods} />
      </Fragment>
    );
  }
}

export default BasicForms;